<template>
    <div class="login">
        <div class="box">
            <div class="slogan">
                <img src="@/assets/img/login/login-form-name.png" alt="" draggable="false" />
            </div>
            <el-form ref="form" class="input-warp" :rules="rules" :model="loginInfo" label-width="0rem">
                <el-form-item class="item-input" prop="username">
                    <img src="@/assets/img/login/username.png" class="icon icon1" />
                    <el-input
                        v-model="loginInfo.username"
                        placeholder="请输入用户名"
                        clearable
                        maxlength="20"
                        @focus="getFocus('用户名')"
                        @blur="loseBlur"
                    />
                </el-form-item>
                <el-form-item class="item-input password" prop="password">
                    <img src="@/assets/img/login/password.png" class="icon icon2" />
                    <el-input
                        v-model="loginInfo.password"
                        placeholder="请输入密码"
                        clearable
                        maxlength="20"
                        @focus="getFocus('密码')"
                        @blur="loseBlur"
                        :type="isPassword ? 'password' : 'text'"
                    />
                    <img
                        src="@/assets/img/login/password-icon.png"
                        alt=""
                        class="password-icon"
                        :class="{ showPass: !isPassword }"
                        @click="showPass"
                    />
                    <div v-if="showErr" class="el-form-item__error">请输入正确的账号或密码</div>
                </el-form-item>
                <el-form-item class="item-input code" prop="code">
                    <div class="check-code">
                        <img src="@/assets/img/login/code.png" class="icon icon3" />
                        <el-input
                            v-model="loginInfo.code"
                            placeholder="验证码"
                            maxlength="4"
                            @focus="getFocus('验证码')"
                            @blur="loseBlur"
                        />
                    </div>
                    <div class="canvas" @click="getRandomNum">
                        {{ total }}
                    </div>
                </el-form-item>
                <div class="submit" @click="submit"></div>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import userApi from '@/api/apiRoute/user';
import { ElMessage, type FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const showErr = ref(false);
const num1 = ref(0);
const num2 = ref(0);
const total = ref('');
const isBlur = ref('');

// 改变input类型
const isPassword = ref(true);
// 密码的展示与隐藏
const showPass = () => {
    isPassword.value = !isPassword.value;
};

const form = ref<FormInstance | null>(null);

const checkUsername = (rule: any, value: string, callback: any) => {
    if (!value) {
        return callback(new Error('账号不能为空'));
    }
    if (value.split(' ').length !== 1) {
        return callback(new Error('输入存在空格，请重新输入'));
    } else {
        callback();
    }
};
const checkPassword = (rule: any, value: string, callback: any) => {
    if (!value) {
        showErr.value = false;
        return callback(new Error('密码不能为空'));
    } else {
        callback();
    }
};
const checkCode = (rule: any, value: string, callback: any) => {
    if (!value) {
        return callback(new Error('验证码不能为空'));
    }
    if (Number(value) !== Number(num1.value + num2.value)) {
        return callback(new Error('验证码错误，请重新输入'));
    } else {
        callback();
    }
};

const loginInfo = reactive({
    username: '',
    password: '',
    code: '',
});

const rules = {
    username: [{ validator: checkUsername, trigger: 'blur', required: true }],
    password: [{ validator: checkPassword, trigger: 'blur', required: true }],
    code: [{ validator: checkCode, trigger: 'blur', required: true }],
};

const getRandomNum = () => {
    num1.value = Math.ceil(Math.random() * 10) + 0;
    num2.value = Math.ceil(Math.random() * 10) + 0;
    total.value = num1.value + '+' + num2.value + '=?';
};
getRandomNum();

const getFocus = (val: string) => {
    isBlur.value = val;
};
const loseBlur = () => {
    isBlur.value = '';
};

// 登录
const login = async () => {
    let data = {
        username: loginInfo.username,
        password: loginInfo.password,
    };
    const res = await userApi.loginApi(data);

    console.log(1111111, res);
    if (!res.success) {
        showErr.value = true;
        ElMessage({ type: 'error', message: res.msg.desc });
        return;
    }

    sessionStorage.setItem('token', res.data.token);

    ElMessage({ type: 'success', message: '登录成功，欢迎进入系统！' });

    router.push('/');
};

// 提交
const submit = () => {
    if (!form.value) return;

    form.value.validate((valid: boolean) => {
        if (!valid) return;
        showErr.value = false;
        login();
    });
};
</script>

<style lang="scss" scoped>
.login {
    height: 100vh;
    background-image: url('@/assets/img/login/login-background.png');
    background-size: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    .slogan {
        margin-bottom: 20px;
    }
    .box {
        width: 4.5225rem;
        padding: 0.2rem;
        text-align: center;
        background-image: url('@/assets/img/login/login-form.png');
        background-size: cover;
        background-repeat: no-repeat;

        .input-warp {
            margin: 0 auto;
            width: 3.375rem;
            position: relative;
            .item-input {
                margin-bottom: 0.225rem;
                &.password {
                    position: relative;
                    .password-icon {
                        position: absolute;
                        right: 0.2rem;
                        width: 0.15rem;
                        cursor: pointer;
                    }
                    .showPass {
                        transform: rotateX(180deg) translateY(25%);
                    }
                    :deep(.el-input__suffix) {
                        margin-right: 0.25rem;
                    }
                }
                &.code {
                    position: relative;
                    width: 2.175rem;
                    height: 0.42rem;
                    .canvas {
                        position: absolute;
                        left: 2.325rem;
                        bottom: 0;

                        width: 1.05rem;
                        height: 0.42rem;

                        line-height: 0.42rem;
                        text-align: center;
                        font-size: 0.21rem;
                        color: #d7effc;
                        border-radius: 0.03rem;
                        background-color: rgba($color: #ffffff, $alpha: 0.1);
                        cursor: pointer;
                    }
                }
                .icon {
                    position: absolute;
                    top: 0.1275rem;
                    z-index: 10;
                    &.icon1 {
                        width: 0.165rem;
                        left: 0.225rem;
                    }
                    &.icon2 {
                        width: 0.135rem;
                        left: 0.24rem;
                    }
                    &.icon3 {
                        width: 0.15rem;
                        left: 0.2325rem;
                    }
                }
            }
        }

        .submit {
            width: 3.375rem;
            height: 0.42rem;
            line-height: 0.42rem;
            text-align: center;
            background-image: url('@/assets/img/login/submit.png');
            background-size: 3.375rem 0.42rem;
            margin-top: 0.45rem;
            cursor: pointer;
        }
    }
}
</style>
<style lang="scss">
.login {
    input::-webkit-input-placeholder {
        font-family: SourceHanSansSC-regular;
        color: rgba($color: #93c1e6, $alpha: 0.8);
    }

    input::-moz-placeholder {
        color: rgba($color: #93c1e6, $alpha: 0.8);
    }

    input::-ms-input-placeholder {
        color: rgba($color: #93c1e6, $alpha: 0.8);
    }
    .el-input__wrapper {
        position: relative;
        background-color: rgba($color: #ffffff, $alpha: 0.1);
        box-shadow: none;
        border-radius: 0.03rem;
        .el-input__inner {
            height: 0.42rem;
            font-size: 0.15rem;
            padding-left: 0.9rem;
            color: #fff;
        }
        &::before {
            position: absolute;
            left: 0.5925rem;
            content: '';
            display: block;
            width: 0.0075rem;
            height: 0.195rem;
            background-color: rgba($color: #93c1e6, $alpha: 0.5);
        }
    }
    .el-form-item {
        margin-bottom: 0;
    }

    .el-form-item__error {
        display: block;
    }
    .el-input__wrapper {
        padding: 0 0.2rem 0 0;
    }
    .el-input__suffix {
        .el-input__clear {
            font-size: 0.15rem;
            color: #fff;
        }
    }
}
</style>
